<template>
    <div class="com_box flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <AddCidUser ref="addRef" @getDataList="getDataList" />
        <div class="strategy_head flexbox flexcenter flexbetween">
            <span class="font_16 color_01">CID用户管理</span>
            <div class="flexbox flexcenter">
                <el-input placeholder="昵称、用户名" size="small" style="width:300px;margin-right:12px" clearable @change="getDataList(1)" prefix-icon="el-icon-search" v-model="queryInfo.keyword">
                </el-input>
                <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="addCidUser()">新建用户</el-button>
                <el-button type="primary" size="small" style="margin-left:12px" @click="downloadFile">
                    <div class="flexbox flexcenter flexjust">
                        <svg width="16" height="16" viewBox="0 0 16 16" stroke='white' class="btn_svg" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M4 6L8 2L12 6" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M4 6L8 2L12 6" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        导出数据
                    </div>
                </el-button>
            </div>
        </div>
        <div class="flex over_box table_box">
            <el-table :data="tableData" class="com_table" ref="straRef" height="100%">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column prop="nickname" label="昵称" min-width="190">
                </el-table-column>
                <el-table-column prop="username" label="用户名" min-width="190">
                    <template slot-scope="scope">
                        <template v-if="scope.row.username">
                            <div class="flexbox flexcenter">
                                <span>{{scope.row.username}}</span>
                                <svg class="copy_btn" @click="copy(scope.row.username)" width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.20001C5.55817 3.20001 5.2 3.55818 5.2 4.00001V6.20001H3.5C3.05817 6.20001 2.7 6.55818 2.7 7.00001V17C2.7 17.4418 3.05817 17.8 3.5 17.8H13.5C13.9418 17.8 14.3 17.4418 14.3 17V15.3H16.5C16.9418 15.3 17.3 14.9418 17.3 14.5V4.00001C17.3 3.55818 16.9418 3.20001 16.5 3.20001H6ZM14.3 13.7H15.7V4.80001H6.8V6.20001H13.5C13.9418 6.20001 14.3 6.55818 14.3 7.00001V13.7ZM6 7.80001H4.3V16.2H12.7V14.5V7.80001H6Z" fill="#616C85" />
                                    <rect x="5.5" y="10" width="6" height="1.6" rx="0.2" fill="#616C85" />
                                    <path d="M5.5 13.2C5.5 13.0895 5.58954 13 5.7 13L9.3 13C9.41046 13 9.5 13.0895 9.5 13.2V14.4C9.5 14.5105 9.41046 14.6 9.3 14.6H5.7C5.58954 14.6 5.5 14.5105 5.5 14.4V13.2Z" fill="#616C85" />
                                </svg>
                            </div>
                        </template>
                        <template v-else>
                            --
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="rel_password" label="密码" min-width="150">
                    <template slot-scope="scope">
                        <template v-if="scope.row.rel_password">
                            <div class="flexbox flexcenter">
                                <span>{{scope.row.rel_password}}</span>
                                <svg class="copy_btn" @click="copy(scope.row.rel_password)" width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.20001C5.55817 3.20001 5.2 3.55818 5.2 4.00001V6.20001H3.5C3.05817 6.20001 2.7 6.55818 2.7 7.00001V17C2.7 17.4418 3.05817 17.8 3.5 17.8H13.5C13.9418 17.8 14.3 17.4418 14.3 17V15.3H16.5C16.9418 15.3 17.3 14.9418 17.3 14.5V4.00001C17.3 3.55818 16.9418 3.20001 16.5 3.20001H6ZM14.3 13.7H15.7V4.80001H6.8V6.20001H13.5C13.9418 6.20001 14.3 6.55818 14.3 7.00001V13.7ZM6 7.80001H4.3V16.2H12.7V14.5V7.80001H6Z" fill="#616C85" />
                                    <rect x="5.5" y="10" width="6" height="1.6" rx="0.2" fill="#616C85" />
                                    <path d="M5.5 13.2C5.5 13.0895 5.58954 13 5.7 13L9.3 13C9.41046 13 9.5 13.0895 9.5 13.2V14.4C9.5 14.5105 9.41046 14.6 9.3 14.6H5.7C5.58954 14.6 5.5 14.5105 5.5 14.4V13.2Z" fill="#616C85" />
                                </svg>
                            </div>
                        </template>
                        <template v-else>

                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="this_cost" label="本月消耗" min-width="150"></el-table-column>
                <el-table-column prop="last_cost" label="上月消耗" min-width="150"></el-table-column>
                <el-table-column prop="status" label="状态" width="150">
                    <template slot-scope="scope">
                        <el-link type="primary" :underline="false" v-if="scope.row.status==1">启用</el-link>
                        <el-link type="warning" :underline="false" v-else-if="scope.row.status==2">试用</el-link>
                        <el-link type="danger" :underline="false" v-else-if="scope.row.status==0">禁用</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page_box flexbox flexcenter">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import AddCidUser from "./AddCidUser";
import downLoad from "../../excel/ExportDown";
export default {
    name: "",
    data() {
        return {
            loading: false,
            queryInfo: {
                page: 1,
                limit: 20,
                keyword: "",
            },
            total: 0,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.getDataList(1);
    },
    methods: {
        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "cid/User/userList",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        addCidUser() {
            this.$refs.addRef.dialogVisible = true;
        },

        // 导出数据
        downloadFile() {
            let list = JSON.parse(JSON.stringify(this.tableData))
            for(let i in list){
                if(list[i].status==1){
                    list[i].status='启用'
                }else if(list[i].status==2){
                    list[i].status='试用'
                }else if(list[i].status==0){
                    list[i].status='禁用'
                }
            }
            var excelDatas = [
                {
                    tHeader: [
                        "昵称",
                        "用户名",
                        "本月消耗",
                        "上月消耗",
                        "状态",
                    ],
                    filterVal: [
                        "nickname",
                        "username",
                        "this_cost",
                        "last_cost",
                        "status",
                    ],
                    tableDatas: list,
                    sheetName: "CID用户列表",
                },
            ];
            downLoad(excelDatas, "CID用户列表");
        },

        // 复制
        copy(text) {
            let url = text;
            let oInput = document.createElement("input");
            oInput.value = url;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象;
            document.execCommand("Copy"); // 执行浏览器复制命令
            this.$message({
                message: "复制成功",
                type: "success",
            });
            oInput.remove();
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {
        AddCidUser,
    },
};
</script>


<style scoped>
.strategy_head {
    height: auto;
    margin-top: 20px;
}
.copy_btn {
    margin-left: 5px;
    cursor: pointer;
}
</style>


